<template>
  <div class="SendGift">
    <h3>
      <div><span class="tag"></span> 送礼详情</div>
      <el-button icon="el-icon-paperclip" size="small" @click="exportExcel"
        >导出EXCEL</el-button
      >
    </h3>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <template slot="empty">
        <el-empty :image-size="200"></el-empty>
      </template>
      <el-table-column prop="avatar" label="收礼人头像">
        <template slot-scope="scope">
          <div class="avatar">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
            >
            </el-image>
            <span class="point" v-if="scope.row.isOnline == 0"></span>
            <span class="point online" v-else></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="userId" label="收礼人ID"> </el-table-column>
      <el-table-column prop="nickname" label="收礼人昵称"> </el-table-column>
      <el-table-column prop="mobile" label="手机号"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="price" label="礼物价格"> </el-table-column>
      <el-table-column prop="giftName" label="礼物名称"> </el-table-column>
      <el-table-column prop="typeString" label="礼物类型">
        <template slot-scope="scope">
          {{
            scope.row.typeString == 1
              ? "普通礼物"
              : scope.row.typeString == 2
              ? "公告礼物"
              : "练习礼物"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="giftNumber" label="礼物数量"> </el-table-column>
      <el-table-column prop="createTime" label="送礼时间"> </el-table-column>
    </el-table>
    <br />
    <pagination
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { userGiveGiftRecord } from "@/api/UserManagement";
export default {
  components: { Pagination },
  props: ["id"],
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    async getList() {
      if (!this.id) return;
      this.loading = true;
      const res = await userGiveGiftRecord({
        userId: this.id,
      });
      this.loading = false;
      if (res.code == 0) {
        this.total = parseInt(res.data.total);
        this.tableData = res.data.list;
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
    async exportExcel() {
      if (!this.id) return;
      const res = await userGiveGiftRecord({
        userId: this.id,
      });
      if (res.code == 0) {
        res.data.list.forEach((item) => {
          switch (item.typeString) {
            case "1":
              item.typeString = "普通礼物";
              break;
            case "2":
              item.typeString = "公告礼物";
              break;
            case "3":
              item.typeString = "连击礼物";
              break;
          }
        });
        const head = [
          "收礼人ID",
          "收礼人昵称",
          "手机号",
          "性别",
          "礼物价格",
          "礼物名称",
          "礼物类型",
          "礼物数量",
          "送礼时间",
        ];
        const filter = [
          "userId",
          "nickname",
          "mobile",
          "sex",
          "price",
          "giftName",
          "typeString",
          "giftNumber",
          "createTime",
        ];
        this.$excel(res.data.list, head, filter, "送礼记录");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.SendGift {
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
    }
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    text-align: right;
  }
  .avatar {
    position: relative;
    .point {
      display: inline-block;
      position: absolute;
      width: 15px;
      height: 15px;
      bottom: 7px;
      right: 41px;
      background: #ccc;
      border-radius: 50%;
    }
    .online {
      background: #40e522 !important;
    }
  }
}
</style>